<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>el与date的两种写法</title>

</head>

<body>


    <div id="root">{{name}}{{age}}</div>
    <div id="root_tow">{{name}}{{age}}</div>

</body>
<script>
    //el的两种写法:第一种:   el: '', 第二种:  vm.$mount('')
    const vm = new Vue({
        //el: '#root',
        data: {
            name: '周杰伦',
            age: "40"
        }

    });
    //el的第二种写法可以用vm.$mount,是挂载在vue实例原型上的方法，F12，在__proto__里面可以找到
    vm.$mount('#root')
        // console.log(vm)


    //data的两种写法:对象式写法 ,2.函数式写法
    const vn = new Vue({

        //1.data对象式写法 
        el: '#root_tow',
        // data: {
        //     name: "邓紫棋",
        //     age: 18
        // }

        //2.函数式写法,函数必须返回一个对象return,开发项目一般用函数式
        data() {
            // console.log(this)
            return {
                name: "邓紫棋",
                age: 18

            }
        }

    })
</script>

</html>